<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>easyDesktop</title>
    <link rel="stylesheet" href="/resources/all.min.css">
    <link rel="stylesheet" id="theme_css" href="/theme/dark.css">
    <style>
        body {
            margin: unset;
            padding-top: 0px;
            padding-bottom: 0px;
            overflow: hidden;
        }

        body::-webkit-scrollbar {
            display: none;
            /* 隐藏滚动条 */
        }
    </style>
</head>

<body>
    <style>
        .content_box {
            width: 100%;
            height: 100vh;
            overflow: scroll;
            margin: unset;
        }

        .content_box::-webkit-scrollbar {
            display: none;
            /* 隐藏滚动条 */
        }

        /* .file-item{
            position: absolute;
        } */
        .file-cl{
            width: 10%;
            position: absolute;
            left: 10px;
            top: 10px;
            display: none;
        }
        .file-list-cl{
            width: 1.3%;
            margin-right: 10px;
        }
        .file-cl:hover{
            scale: 1.5;
            transition: all 0.5s;
        }
        .file-list-cl:hover{
            scale: 1.5;
            transition: all 0.5s;
        }
        .file-item:hover .file-list-cl{
            display: block;
        }
        .file-item:hover .file-cl{
            display: block;
        }
        .file-cl img{
            width: 100%;
        }
        .file-list-cl img{
            width: 100%;
        }
    </style>
    <div class="content_box" id="content_box">
        <div class="container" id="main" style="margin-top: 20px;">
            <div class="header">
                <div class="time-display">
                    <i class="fas fa-clock"></i>
                    <span id="current-time">loading...</span>
                </div>
                <div class="path-navigation">
                    <button id="pathBackBtn" class="path-btn"><i class="fas fa-arrow-up"></i></button>
                    <div class="breadcrumb" id="breadcrumb">
                        <span id="b2d" class="breadcrumb-item" data-path="">桌面</span>
                    </div>
                    <div class="search_box" id="search_box">
                        <input id="search_input" oninput="load_search()" class="search_input" type="text"
                            placeholder="搜索...">
                    </div>
                </div>
                <div class="view-toggle">
                    <button id="gridViewBtn" class="view-btn active"><i class="fas fa-th-large"></i></button>
                    <button id="listViewBtn" class="view-btn"><i class="fas fa-list"></i></button>
                </div>
                <button id="settingsBtn" class="settings-btn"><i class="fas fa-cog"></i></button>
            </div>

            <div class="files-grid" id="filesContainer">
                <!-- 网格视图内容 -->
            </div>
            <div class="files-list" id="filesListContainer" style="display:none;">
                <!-- 列表视图内容 -->
            </div>
            <!-- 文件项将通过JavaScript动态生成 -->
        </div>

        <!-- 右键菜单 -->
        <div class="context-menu" id="contextMenu">
            <div class="context-menu-item" id="menuOpen">
                <i class="fas fa-folder-open"></i>
                <span>打开</span>
            </div>
            <div class="context-menu-item" id="menuCopy">
                <i class="fas fa-copy"></i>
                <span>复制</span>
            </div>
            <div class="context-menu-item" id="menuRename">
                <i class="fas fa-edit"></i>
                <span>重命名</span>
            </div>
            <div class="context-menu-item delete" id="menuDelete">
                <i class="fas fa-trash-alt"></i>
                <span>删除</span>
            </div>
        </div>
        <div class="context-menu" id="blankMenu">
            <div class="context-menu-item" id="menuPaste">
                <i class="fas fa-paste"></i>
                <span>粘贴</span>
            </div>
            <div class="context-menu-item" id="menuNew">
                <i class="fas fa-plus"></i>
                <span>新建</span>
            </div>
        </div>

        <!-- 重命名对话框 -->
        <div class="rename-overlay" id="renameOverlay">
            <div class="rename-container">
                <h3>重命名文件</h3>
                <input type="text" class="rename-input" id="renameInput" placeholder="输入新文件名">
                <div class="rename-buttons">
                    <button class="rename-btn cancel" id="renameCancel">取消</button>
                    <button class="rename-btn confirm" id="renameConfirm">确认</button>
                </div>
            </div>
        </div>

        <!-- 删除确认对话框 -->
        <div class="delete-confirm" id="deleteConfirm">
            <div class="delete-container">
                <h3>确认删除</h3>
                <p>您确定要删除文件 "<span id="deleteFileName"></span>" 吗？此操作不可恢复。</p>
                <div class="delete-buttons">
                    <button class="delete-btn cancel" id="deleteCancel">取消</button>
                    <button class="delete-btn confirm" id="deleteConfirmBtn">彻底删除</button>
                    <button class="delete-btn confirm" id="deleteConfirmBtn_r">移到回收站</button>
                </div>
            </div>
        </div>

        <!-- 新建文件对话框 -->
        <div class="rename-overlay" id="newFileOverlay">
            <div class="rename-container">
                <h3>新建文件</h3>
                <select id="newFileTypeSelect" class="rename-input">
                    <option value="docx">Word 文档 (.docx)</option>
                    <option value="xlsx">Excel 表格 (.xlsx)</option>
                    <option value="pptx">PPT 演示 (.pptx)</option>
                    <option value="txt">文本文件 (.txt)</option>
                    <option value="folder">文件夹</option>
                </select>
                <div class="rename-buttons">
                    <button class="rename-btn cancel" id="newFileCancel">取消</button>
                    <button class="rename-btn confirm" id="newFileConfirm">确认</button>
                </div>
            </div>
        </div>
    </div>
    <style>
        .settings_box {
            width: 100%;
            height: 100%;
            position: fixed;
            background-color: rgba(0, 0, 0, 0.5);
            top: 0px;
            left: 0px;
            position: fixed;
        }

        /* 背景设置样式 */
        .bg-settings {
            margin-top: 20px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
        }

        .bg-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }

        .bg-btn {
            flex: 1;
            padding: 8px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
        }

        .bg-btn:hover {
            opacity: 0.8;
        }

        .bg-reset {
            background: #ff6b6b;
            color: white;
        }

        .bg-custom {
            background: #5dade2;
            color: white;
        }

        .blur-slider {
            width: 100%;
            margin-top: 10px;
        }

        .blur-label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
        }

        .theme-settings-panel::-webkit-scrollbar {
            display: none;
            /* 隐藏滚动条 */
        }

        .fit_btn {
            width: 100%;
        }

        .fit_btn {
            width: 100%;
            padding: 6px 10px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 15px;
            margin-top: 15px;
        }

        .setting_note {
            font-size: 10px;
            color: rgb(163, 163, 163);
        }

        .cf_type_toggle {
            width: 50%;
            padding: 5px 10px;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 6px;
            background-color: #fff;
            appearance: none;
            /* 移除默认下拉箭头 */
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
            /* 自定义下拉箭头 */
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 20px;
            transition: border-color 0.3s ease;
        }

        .cf_type_toggle:focus {
            border-color: #5dade2;
            /* 聚焦时边框颜色 */
            outline: none;
            box-shadow: 0 0 5px rgba(93, 173, 226, 0.5);
        }

        .dir_btn_box {
            display: flex;
            width: 40%;
            padding: 4px;
            border-radius: 12px;
            overflow: hidden;
            margin-left: auto;
            transition: background-color 0.3s ease;
        }

        .dir_btn {
            flex: 1;
            height: 30px;
            cursor: pointer;
            background-color: #fff;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #333;
            transition: all 0.3s ease;
        }

        .dir_btn:hover {
            background-color: #f7f7f7;
        }

        .dir_btn_active {
            background-color: #5dade2;
            color: white;
            font-weight: bold;
            box-shadow: 0 0 5px rgba(93, 173, 226, 0.5);
        }
    </style>
    <!-- 主题设置面板 -->
    <div class="settings_box" id="themeSettingsPanel" style="display: flex;">
        <div class="theme-settings-panel" id="themeSettings_box" style="height: 90vh;overflow: scroll;display: block;">
            <div class="settings-header">
                <h3>设置</h3>
                <button class="close-btn" id="closeThemePanel"><i class="fas fa-times"></i></button>
            </div>

            <div class="settings-section">
                <div class="system-theme-toggle">
                    <span>开机自启动</span>
                    <label class="switch">
                        <input type="checkbox" id="autoStartToggle">
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>
            <div class="settings-section">
                <div class="system-theme-toggle">
                    <span>全屏模式</span>
                    <label class="switch">
                        <input type="checkbox" id="fullScreenToggle">
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>
            <div class="settings-section">
                <div class="system-theme-toggle">
                    <span>防打扰</span>
                    <label class="switch">
                        <input type="checkbox" id="fdrToggle">
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>
            <p id="fdr_note" class="setting_note">当有软件全屏时不触发easyDesktop</p>
            <div class="settings-section">
                <div class="system-theme-toggle">
                    <span>显示系统应用</span>
                    <label class="switch">
                        <input type="checkbox" id="sysappToggle">
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>
            <p id="sys_note" class="setting_note">在桌面显示此电脑、回收站、控制面板</p>
            <div class="settings-section">
                <div class="system-theme-toggle">
                    <span>打开文件后收起窗口</span>
                    <label class="switch">
                        <input type="checkbox" id="of_sToggle">
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>
            <div class="settings-section">
                <div class="system-theme-toggle">
                    <span>呼出触发方式</span>
                    <select class="cf_type_toggle" id="cf_type_toggle">
                        <option value="1">鼠标移到左下角</option>
                        <option value="2">win+shift</option>
                        <option value="3">win+~</option>
                        <option value="4">自定义</option>
                    </select>
                </div>
            </div>
            <p id="hotkey_show" class="setting_note" style="display: none;">自定义：</p>
            <div class="settings-section">
                <div class="system-theme-toggle">
                    <span>收起触发方式</span>
                    <select class="cf_type_toggle" id="out_cf_type_toggle">
                        <option value="1">鼠标移出窗口</option>
                        <option value="2">窗口失焦</option>
                    </select>
                </div>
            </div>
            <div class="settings-section">
                <label id="sc_input">缩放比例：</label>
                <input type="range" style="width: 100%;" id="sc_slider" class="sc-slider" min="40" max="120"
                    value="100">
            </div>
            <div class="settings-section" style="display: flex;">
                <span>默认文件夹</span>
                <div class="dir_btn_box" id="dir_btn_box">
                    <div class="dir_btn" onclick="change_default_dir('desktop')">
                        <span>桌面</span>
                    </div>
                    <div class="dir_btn" onclick="change_default_dir()">
                        <span>自定义</span>
                    </div>
                </div>
            </div>
            <p id="defeat_dir_show" class="setting_note">当前选择：桌面</p>
            <button class="fit_btn" id="fit_btn" onclick="fit_window()">调整尺寸</button>
            <div class="settings-section">
                <div class="system-theme-toggle">
                    <span>跟随系统主题</span>
                    <label class="switch">
                        <input type="checkbox" id="followSystemTheme">
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>
            <div class="settings-section">
                <h4>选择主题</h4>
                <div class="theme-cards">
                    <div class="theme-card" data-theme="light">
                        <div class="theme-preview">
                            <img src="/resources/theme_previews/light.png" alt="浅色主题预览">
                        </div>
                        <span>浅色主题</span>
                    </div>
                    <div class="theme-card" data-theme="dark">
                        <div class="theme-preview">
                            <img src="/resources/theme_previews/dark.png" alt="深色主题预览">
                        </div>
                        <span>深色主题</span>
                    </div>
                    <div class="theme-card" data-theme="zzz">
                        <div class="theme-preview">
                            <img src="/resources/theme_previews/3z.png" alt="绝区零主题预览">
                        </div>
                        <span>3Z主题</span>
                    </div>
                </div>
            </div>
            <div class="settings-section" style="margin-top: 20px;">
                <h4>背景设置</h4>
                <div class="bg-settings">
                    <div class="bg-buttons">
                        <button id="bgResetBtn" class="bg-btn bg-reset">恢复默认</button>
                        <button id="bgCustomBtn" class="bg-btn bg-custom">选择图片</button>
                    </div>
                    <label class="blur-label">磨砂效果强度: <span id="blurValue">0</span>%</label>
                    <input type="range" id="blurSlider" class="blur-slider" min="0" max="100" value="0">
                </div>
            </div>
            <p id="v_note" style="font-size: 15px;width: 100%;text-align: center;color: rgb(163, 163, 163);">v1.9.0</p>
        </div>
    </div>
    </div>
    <style>
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease;
        }
        
        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        
        .modal {
            background: white;
            border-radius: 8px;
            width: 90%;
            max-width: 450px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        
        .modal h2 {
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 22px;
        }
        
        .instructions {
            color: #7f8c8d;
            margin-bottom: 25px;
            line-height: 1.6;
            font-size: 15px;
        }
        
        .key-display {
            font-size: 24px;
            font-weight: 600;
            color: #2c3e50;
            padding: 20px;
            border-radius: 6px;
            margin: 20px 0;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f9fa;
            border: 1px solid #ecf0f1;
        }
        
        .key-limits {
            color: #7f8c8d;
            font-size: 14px;
            margin-top: 5px;
            font-weight: 400;
        }
        
        .modal-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 25px;
        }
        
        .modal-btn {
            padding: 10px 25px;
            border: none;
            border-radius: 5px;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .confirm-btn {
            background: #2ecc71;
            color: white;
        }
        
        .confirm-btn:hover {
            background: #27ae60;
        }
        
        .cancel-btn {
            background: #e74c3c;
            color: white;
        }
        
        .cancel-btn:hover {
            background: #c0392b;
        }
        
        .info-box {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 600px;
        }
        
        .info-box h2 {
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 22px;
            text-align: center;
        }
        
        .code-block {
            background: #2c3e50;
            color: #ecf0f1;
            padding: 20px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 15px;
            line-height: 1.6;
            margin-top: 15px;
            overflow-x: auto;
            text-align: left;
        }
        
        .highlight {
            color: #f1c40f;
            font-weight: bold;
        }
    </style>
    <!-- 快捷键记录模态框 -->
    <div class="modal-overlay" id="modalOverlay">
        <div class="modal">
            <h2>记录快捷键</h2>
            <p class="instructions">
                请按下您想要设置的快捷键组合（最多三个键）
            </p>
            <div class="key-display" id="keyDisplay">
                等待按键输入...
            </div>
            <p class="key-limits">已记录 <span id="currentKeys">0</span>/3 个按键</p>
            
            <div class="modal-buttons">
                <button class="modal-btn confirm-btn" id="confirmBtn">确认</button>
                <button class="modal-btn cancel-btn" id="cancelBtn">取消</button>
            </div>
        </div>
    </div>
</body>
<script src="/resources/ed.js"></script>
<script src="resources/hotkey_record.js"></script>
</html>